<template>
  <div :id="echarts" :style="getheight" class="backtran"></div>
</template>
<script>
export default {
  name: 'bar',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    },
    height: {
      type: Number,
      default: 340
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        grid: { top: '30px', left: '60px', right: '16px', bottom: '10%' },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value',
          data: [],
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 0.5,
              type: 'dashed'
            }
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },

        series: {
          type: 'pictorialBar',
          barCategoryGap: '0%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          label: {
            show: true,
            position: 'top',
            distance: 15,
            color: '#fff',
            fontWeight: 'bolder',
            fontSize: 20
          },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(16, 197, 242, .8)' //  0%  处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(16, 197, 242, .1)' //  100%  处的颜色
                  }
                ],
                global: false //  缺省为  false
              }
            },
            z: 10,
            emphasis: {
              opacity: 1
            },
            data: []
          }
        }
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      this.option.xAxis.data = this.chartData.x
      this.option.series.data = this.chartData.y
      chartFactor.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
.backtran {
  background-color: transparent;
}
</style>